﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="course.aspx.cs" Inherits="webapi.views.course1" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <title></title>
  <link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all" />
  <link rel="stylesheet" href="../layuiadmin/style/admin.css" media="all" />
  <style>
    /*.laytable-cell-1-0-5 {
      width: auto !important;
    }*/
  </style>
</head>

<body>
  <form id="form1" runat="server">
    <div>
      <div class="layui-fluid">
        <div class="layui-card">
          <div class="layui-form layui-card-header layuiadmin-card-header-auto">
            <div class="layui-form-item">
              <div class="layui-inline layuiadmin-input-useradmin">
                <label class="layui-form-label">课程名称</label>
                <div class="layui-input-block">
                  <input id="search" type="text" name="name" placeholder="请输入" autocomplete="off" class="layui-input">
                </div>
              </div>
              <div class="layui-inline">
                <button id="searchBtn" class="layui-btn layuiadmin-btn-replys" data-type="reload" lay-submit
                  lay-filter="course_search">
                  <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
                </button>
                <button class="layui-btn layuiadmin-btn-replys" data-type="batchadd"><a href="javascript:void(0)"
                    style="color: white;">添加<a></button>
                <button class="layui-btn layui-btn-danger layuiadmin-btn-replys" data-type="batchdel">删除</button>
                <button class="layui-btn layuiadmin-btn-replys" data-type="allData">显示全部</button>
              </div>
            </div>
          </div>
          <div class="layui-card-body">
            <table id="LAY-app-forumreply-list" lay-filter="LAY-app-forumreply-list"></table>
            <script type="text/html" id="imgTpl">
              <img style="display: inline-block; width: 50%; height: 100%;" src="{{d.avatar}}" />
            </script>
            <script type="text/html" id="table-forum-replys">
              <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-edit"></i>编辑</a>
            </script>
          </div>
        </div>
      </div>

      <div id="Dialog" style="display: none;">
        <div class="layui-form" lay-filter="layuiadmin-form-replys" id="layuiadmin-form-replys"
          style="padding: 20px 30px 0 0;">
          <div class="layui-form-item">
            <label class="layui-form-label">课程代码</label>
            <div class="layui-input-block">
              <input name="course_id" lay-verify="required" class="layui-input" />
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">课程名称</label>
            <div class="layui-input-block">
              <input name="name" lay-verify="required" class="layui-input" />
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">学分</label>
            <div class="layui-input-block">
              <input name="point" lay-verify="required|number" class="layui-input" />
            </div>
          </div>
          <div class="layui-form-item">
            <label class="layui-form-label">必修课</label>
            <div class="layui-input-block">
              <input type="checkbox" name="is_must" lay-skin="switch" lay-text="是|否" value="1">
            </div>
          </div>
        </div>
      </div>
    </div>

  </form>

</body>
<script type="text/javascript" src="../layuiadmin/layui/layui.js"></script>
<script type="text/javascript" src="../public/js/request.js"></script>
<script type="text/javascript">
  layui.config({
    base: '../layuiadmin/' //静态资源所在路径
  }).extend({
    index: 'lib/index' //主入口模块
  }).use(['index', 'course'], function () {
    var $ = layui.$,
      form = layui.form,
      table = layui.table,
      course = layui.course;

    var tableData = []; //表格的数据
    var delData = {} //需删除的数据

    //页面的开始
    //表格初始化, 参数为'表格数据的接口地址'
    tableRender("http://localhost:8589/api/Course/getCourse")


    //监听搜索
    $("#searchBtn").click(function () {
      var field = $('#search').val()
      searchByName(field, layer.load(1))
      return false;
    })

    console.log(form.on)

    form.on('submit(course_search)', function (data) {
      var field = data.field;
      //调用搜索的函数
      console.log(data)
      searchByName(field, layer.load(1))
      return false;
    });


    //监听多行选择
    table.on('checkbox(LAY-app-forumreply-list)', function (obj) {
      //将选择的行以课程的id为key添加到delData对象中
      delData[obj.data.course_id] = obj;
    });


    //监听工具条,表格右侧的'编辑'和'开课'按钮的回调  参数obj代表选中的行
    table.on('tool(LAY-app-forumreply-list)', function (obj) {
      //开课按钮的回调
      if (obj.event === 'open') {
        layer.confirm('确定删除此课程吗？', function () {
          //删除数据
          alert('开课')
          //delAjax(course.getDataId({ obj }), layer.load(1));
        });
      } else if (obj.event === 'edit') {
        //'编辑'按钮的回调	
        course.myUpdate(obj, function (res) {
          //发起数据修改请求
          updateAjax(obj, res, layer.load(1))
        })
      }
    });


    // active对象,属性包含表格上方'添加'、'删除'和'显示全部'按钮的回调
    var active = {
      //添加按钮
      batchadd: function () {
        course.batchadd(function (res) {
          //向服务器发起请求  添加数据
          addAjax(res, layer.load(1))
        })
      },
      //删除按钮
      batchdel: function () {
        course.batchdel(delData, function (res) {
          delAjax(res, layer.load(1));
        })
      },
      //显示全部‘按钮
      allData: function () {
        tableRender("http://localhost:8589/api/Course/getCourse")
      }
    }


    //绑定'添加'、'删除'和'显示全部'按钮到active对象
    $('.layui-btn.layuiadmin-btn-replys').on('click', function () {
      var type = $(this).data('type');
      active[type] ? active[type].call(this) : '';
      return false;
    });


    //表格渲染
    /**
     * @param {string} url  获取全部数据的接口地址
     * @param {array} data  表格的全部数据, 仅在'url为空'时使用该参数
     */
    function tableRender(url, data, callback) {
      table.render({
        elem: '#LAY-app-forumreply-list',
        url: url, //后台的接口地址
        cols: [
          [{
            type: 'checkbox',
            fixed: 'left'
          }, {
            field: 'course_id',
            title: '课程号',
          }, {
            field: 'name',
            title: '课程名字'
          },
          {
            field: 'point',
            title: '学分'
          }, {
            field: 'is_must',
            title: '是否必修',
            templet: "<div>{{ d.is_must ? '必修' : '选修'}}</div>"
          }, {
            title: '操作',
            width: 150,
            align: 'center',
            fixed: 'right',
            toolbar: '#table-forum-replys'
          }]
        ],
        data: data,
        page: {
          curr: 1,
          limit: 10,
          limits: [10, 15, 20, 25, 30]
        },
        request: {
          pageName: 'curr' //页码的参数名称，
          ,
          limitName: 'limit' //每页数据量的参数名
        },
        text: '对不起，加载出现异常！',
        done: function (res, curr, count) {
          //res.data为后台返回的全部数据,  curr为表格当前的分页 ,count为数据的总长度
          //异步获取的数据,tableData为表格的全部数据
          console.log(res)
          url && (tableData = res.data);
          callback && callback()
          callback = null
        }
      })
    }

    //以'课程名称'作为条件搜索课程
    function searchByName(data, loading) {
      console.log(data)
      $.ajax({
        url: "http://localhost:8589/api/Course/searchByName", //实际使用请改成服务端真实接口
        type: 'post',
        data: {
          name: data
        },
        success: function (res) {
          layer.close(loading)
          //判断搜索的结果是否存在
          if (res.data) {
            //将结果渲染到表格, res.data的类型为数组
            tableRender('', res.data)
          } else {
            layer.msg('没有此课程', {
              icon: 2,
              time: 1000
            })
          }
        },
        fail: function () {
          layer.msg('查找失败', {
            icon: 2,
            time: 1000
          })
        }
      })
    }


    /**
     * @param {Object} data  添加的数据
     * @param {Object} loading  弹窗对象
     */
    function addAjax(course, loading) {
      //向服务器发起请求  添加数据
      $.ajax({
        url: "http://localhost:8589/api/Course/insertCourse", //实际使用请改成服务端真实接口
        type: 'post',
        dataType: 'JSON',
        data: {
          course: JSON.stringify(course)
        },
        success: function (res) {
          layer.close(loading)
          //判断数据添是否成功
          if (res.msg) {
            tableRender("http://localhost:8589/api/Course/getCourse", '', function () {
              layer.msg('添加成功', {
                icon: 6,
                time: 1000
              })
            })
          } else {
            layer.msg('添加失败', {
              icon: 2,
              time: 1000
            })
          }
        }
      });

    }

    /**
     * 更新表格的数据
     * @param {Object} tr  需修改的行对象
     * @param {Object} update  更新后的数据
     * @param {Object} loading  弹窗对象
     */
    function updateAjax(tr, update, loading) {
      //发起数据修改请求
      $.ajax({
        url: "http://localhost:8589/api/Course/updateCourse",
        type: 'post',
        dataType: 'JSON',
        data: {
          course: JSON.stringify(update)
        },
        success: function (res) {
          layer.close(loading)
          //判断数据修改是否成功
          if (res.msg) {
            //数据更新
            tr.update(update);
            layer.msg('修改成功', {
              icon: 6,
              time: 1000
            })
          } else {
            layer.msg('修改失败', {
              icon: 5,
              time: 1000
            })
          }
        }
      })

    }


    //向服务器发送删除数据请求
    /**
     * @param {Object} del  包含'arr'和'delData'两个属性
     * arr为需删除的课程的id,类型为数组
     * delData为需删除的行对象的集合,类型为对象
     * @param {Object} loading  弹窗对象
     */
    function delAjax(del, loading) {
      $.ajax({
        url: "http://localhost:8589/api/Course/delCourse", //实际使用请改成服务端真实接口
        type: 'post',
        data: {
          ids: JSON.stringify(del.arr)
        },
        success: function (res) {
          //判断删除是否成功
          if (res.msg) {
            //删除行
            tableRender("http://localhost:8589/api/Course/getCourse", '', () => {
              layer.close(loading)
              layer.msg('删除成功', {
                icon: 6,
                time: 1000
              })
            })
          } else {
            layer.msg('删除失败', {
              icon: 5,
              time: 1000
            })
          }
        }
      });

    }
  });
</script>

</html>